<template>
	<div class="app-container">

		<section>
			<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true" :model="formInline" label-width="150px">
					<el-form-item>
						<el-button type="primary" @click.prevent="handleHistory">历史列表</el-button>
						</el-table-column>
					</el-form-item>
					<!--<span style="font-size:20px;font-weight: bold; display:block;margin-bottom: 20px;text-align: center;">异常单</span>-->
					<div>
						<el-form-item label="采购单号:">
							<el-input v-model="formInline.OrderVoucher" placeholder="采购单号" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
						</el-form-item>
						<el-form-item label="供货商名称:">
							<el-select v-model="formInline.SupplierId" filterable placeholder="供货商名称" @change="getSupplierID">
								<el-option v-for="item in SupplierList" :key="item.SupplierId" :label="item.SupplierName" :value="item.SupplierId">
								</el-option>
							</el-select>
						</el-form-item>
					</div>
					<div>
						<el-form-item label="收货人:">
							<el-input v-model="formInline.Consignee" placeholder="收货人"></el-input>
						</el-form-item>
						<el-form-item label="货物状态:">
							<el-select v-model="formInline.Status" placeholder="货物状态">
								<el-option v-for="item in Status" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="收货日期:">
							<el-date-picker v-model="formInline.Ins" type="date" value='yyyy-MM-dd' placeholder="选择日期" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>

					</div>
				</el-form>
			</el-col>
			<el-table :data="skulist" v-loading="skulistLoading" ref="multipleTable" border style="width: 100%; margin-top: 20px" tooltip-effect="dark" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="ProductId" label="商品ID" align="center">
				</el-table-column>
				<el-table-column prop="SKUName" label="商品名称" align="center">
				</el-table-column>
				<el-table-column prop="OrderNum" sortable label="订货数量" align="center">
				</el-table-column>
				<el-table-column prop="ConsignAmount" sortable label="发货数量" align="center">
				</el-table-column>
				<el-table-column prop="Getnumber" sortable label="到货数量" align="center">
				</el-table-column>
				<el-table-column prop="Description" label="异常描述" align="center">
					<template slot-scope="scope">
						<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="scope.row.Description">
						</el-input>
					</template>
				</el-table-column>
				<el-table-column prop="Solution" label="解决办法" align="center">
					<template slot-scope="scope">
						<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="scope.row.Solution">
						</el-input>
					</template>
				</el-table-column>
				<el-table-column prop="Principal" label="责任人" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.Principal"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="due" label="处理" align="center">
					<template slot-scope="scope">
						<el-button type="primary" @click="handledue(scope.row)" v-model="scope.row.due">处理</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px">
				<el-button @click="toggleSelection(skulist)">全选</el-button>
				<el-button @click="toggleSelection()">取消选择</el-button>
				<el-button type="primary" @click.native="OderVisible = true">处理</el-button>
			</div>

			<!--处理界面-->
			<el-dialog title="处理" :visible.sync="dueFormVisible" width="40%">
				<el-form :model="dueForm" label-width="100px" v-loading="skulistLoading">
					<el-form-item label="处理状态" prop="Status">
						<el-select v-model="HandleStatus" placeholder="请选择" @change="selectStatus">
							<el-option v-for="item in ProcessingStauts" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="员工编号" prop="MemberId" v-show="HandleStatus==2">
						<el-input v-model="dueForm.MemberId" auto-complete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="dueFormVisible = false">取消</el-button>
					<el-button type="primary" @click.native="skuSubmit">处理</el-button>
				</div>
			</el-dialog>
			<el-dialog title="提示" :visible.sync="OderVisible" width="30%">
				<span>是否确定处理</span>
				<span slot="footer">
                    <el-button @click="OderVisible = false">取 消</el-button>
                   <el-button type="primary" @click.native="addSubmit">确 定</el-button>
                </span>
			</el-dialog>
		</section>

	</div>
</template>

<script>
	import { SKUList, GetAnySupplierList, AbnormalBill } from '@/api/api'
	import Config from "../../api/config";
	export default {
		data() {
			return {
				ProductId: 0,
				HandleStatus: '',
				OderVisible: false,
				SupplierList: [],
				skulist: [],
				multipleSelection: [],
				formInline: {
					OrderVoucher: "",
					Consignee: "",
					Ins: "",
					SupplierId: "",
					Status: "",
				},
				checked: true,
				lookLoading: false,
				lookFormVisible: false,
				addLoading: false,
				addFormVisible: false,
				dueFormVisible: false,
				dueForm: {},
				list: [],
				page: 1,
				pageSize: 20,
				total: 10000000000,
				ProcessingStauts: [{
						value: 1,
						label: "归档"
					},
					{
						value: 2,
						label: "转交"
					},
					{
						value: 3,
						label: "已处理"
					}
				],

				Status: [{
						value: 1,
						label: "丢失"
					},
					{
						value: 2,
						label: "正常"
					},
					{
						value: 3,
						label: "部分到货"
					},
					{
						value: 4,
						label: "超额到货"
					}
				],

				addForm: {},
			};
		},
		created() {
			this.getSkuList();
			this.GetAnySupplierList();
		},
		methods: {

			//获取供货商列表
			GetAnySupplierList() {
				var self = this;
				var para = {
					//					sessionid: sessionStorage.getItem("sessionid")
				};
				para = {
					"": Base64.encode(JSON.stringify(para))
				};
				GetAnySupplierList(para).then((res) => {
					//										console.log(JSON.parse(Base64.decode(res.data.Data)))
					if(res.data.Status != 1) {
						this.$message({
							message: res.data.Description,
							type: 'error'
						});
						return;
					} else {
						self.SupplierList = JSON.parse(Base64.decode(res.data.Data));
					}
				})
			},
			getSupplierID(val) {
				this.formInline.SupplierId = val;
			},
			//获取商品列表
			getSkuList() {
				var self = this;
				var para = {
					//					sessionid: sessionStorage.getItem("sessionid"),
					page: this.page,
					pagesize: this.pageSize,
					//					VoucherNo: this.warehoue.VoucherNo,	
				};
				this.skulistLoading = true;
				SKUList(para).then(res => {
					if(res.data.Status != 1) {
						this.$message({
							message: res.data.Description,
							type: 'error'
						});
						return;
					} else {
						var vdata = JSON.parse(Base64.decode(res.data.Data));
						console.log(vdata);
						var list = vdata.DataList;
						for(var item in list) {
							//							list[item].Solution = 1;
							//							list[item].Description = '';
						}
						self.skulist = list;
						self.total = vdata.TotalCount;
					}
					self.skulistLoading = false;

				})
			},
			selectStatus(val) {
				/*
								console.log(val)
								this.status = val;
								console.log(this.status)*/
				this.HandleStatus = val;
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			//显示商品处理界面
			handledue(row) { //HandleStatus
				console.log(row)
				this.ProductId = row.ProductId;
				this.dueFormVisible = true;

				this.dueForm = Object.assign({}, row);
				//				this.receivinglist = row.Receivinglist;
			},
			handleCurrentChange(val) {
				this.page = val;
			},
			//显示历史列表界面
			handleHistory: function() {
				//				this.addFormVisible = true;
				//				this.addForm = {}
				this.$router.push({
					path: '/abnormal/historylist'
				});
			},
			//商品处理提交
			skuSubmit() {
				var self = this;
				//绑定该行的商品ID
				var arr = this.skulist.filter(function(item) {
					//					console.log(item)
					return self.ProductId == item.ProductId
				})
				//判断处理状态是否为转交，是则将员工编号传给后台
				if(this.HandleStatus != '') {
					arr[0].HandleStatus = this.HandleStatus;
					if(this.HandleStatus == 2) {
						arr[0].MemberId = this.dueForm.MemberId;
					}
				}
				//判断员工编号是否为空
				if(this.HandleStatus == 2) {
					if(!this.dueForm.MemberId) {
						this.$message({
							message: "请输入员工编号",
							type: 'error'
						});
						return;
					}
				}
				this.dueFormVisible = false;
				this.HandleStatus = '';
				this.dueForm.MemberId = '';
			},

			addSubmit() {
				var self = this;
				if(!this.formInline.OrderVoucher) {
					this.$message({
						message: "请输入采购单号",
						type: 'error'
					});
					self.OderVisible = false;
					return;
				}
				if(!this.formInline.SupplierId) {
					this.$message({
						message: "请选择供货商",
						type: 'error'
					});
					self.OderVisible = false;
					return;
				}

				if(!this.formInline.Consignee) {
					this.$message({
						message: "请输入收货人",
						type: 'error'
					});
					self.OderVisible = false;
					return;
				}
				if(!this.formInline.Status) {
					this.$message({
						message: "请选择货物状态",
						type: 'error'
					});
					self.OderVisible = false;
					return;
				}
				if(!this.formInline.Ins) {
					this.$message({
						message: "请选择收货日期",
						type: 'error'
					});
					self.OderVisible = false;
					return;
				}
				var list = self.Jsonspr;
				if(!list) {

					this.$message({
						message: "请选择异常单商品",
						type: 'error'
					});
					self.OderVisible = false;
					return;
				}
				for(var item in list) {
					if(this.formInline.Status != 2) {
						if(!list[item].Description) {
							this.$message({
								message: "请输入异常描述",
								type: 'error'
							});
							self.OderVisible = false;
							return;
						} else if(!list[item].Solution) {
							this.$message({
								message: "请输入解决办法",
								type: 'error'
							});
							self.OderVisible = false;
							return;
						} else if(!list[item].Principal) {
							this.$message({
								message: "请输入责任人",
								type: 'error'
							});
							self.OderVisible = false;
							return;
						}

					}
					if(!list[item].HandleStatus) {
						this.$message({
							message: "请选择处理状态",
							type: 'error'
						});
						self.OderVisible = false;
						return;
					}

				}
				var para = {
					//					sessionid: sessionStorage.getItem("sessionid"),
					OrderVoucher: this.formInline.OrderVoucher,
					SupplierId: this.formInline.SupplierId,
					Status: this.formInline.Status,
					Consignee: this.formInline.Consignee,
					Ins: this.formInline.Ins,
					Jsonspr: this.Jsonspr,
				};
				// 先检查

				// 循环
				for(var item in this.Jsonspr) {
					this.Jsonspr[item].SupplierId = this.formInline.SupplierId;
				}

				console.log(para)
				AbnormalBill(para).then((res) => {
					if(res.data.Status != 1) {
						this.$message({
							message: res.data.Description,
							type: 'error'
						});
						return;
					} else {
						self.formInline.OrderVoucher = '';
						self.formInline.SupplierId = '';
						self.formInline.Consignee = '';
						self.formInline.Ins = '';
						self.formInline.Status = '';
						self.getSkuList();
						this.$message({
							message: res.data.Description,
							type: 'success'
						});

					}

				})

				self.OderVisible = false;
			},
			//显示历史列表界面
			handleHistory: function() {
				this.$router.push({
					path: '/abnormal/historylist'
				});
			},

			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			changeNum(row) {
				for(var item in this.Jsonspr) {
					if(this.Jsonspr[item].ProductId == row.ProductId) {
						this.Jsonspr[item] = row;
					}
				}
			},
			handleSelectionChange(val) {
				console.log(val)
				this.Jsonspr = val;
			},

			handleCurrentChange(val) {
				this.page = val;
			},

		},

	};
</script>

<style>

</style>